/** 
 * ----------------------------------------------------------------
 * Responsive layout
 * @param ${String} device_name
 * ----------------------------------------------------------------
*/
$device_points: (
  "phone": (
    0px,
    480px
  ),
  "pad": (
    481px,
    768px
  ),
  "notebook": (
    769px,
    1024px
  ),
  "desktop": (
    1025px,
    1200px
  ),
  "tv": 1201px
);

@mixin respond-to($device_name) {
  $point: map-get($device_points, $device_name);

  @if type-of($point) == "list" {
    $min: nth($point, 1);
    $max: nth($point, 2);
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else {
    @media (min-width: $point) {
      @content;
    }
  }
}
